<style lang="scss" scoped>
.my-toast {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;
    .my-toast-box {
        width: 75%;
        min-height: 150px;
        background-color: #fff;
        border-radius: 5px;
        padding: 10px;
        position: relative;
        .close {
            position: absolute;
            right: 10px;
            top: 0px;
        }
        .title {
            font-weight: bold;
            font-size: 20px;
            margin-top: 20px;
        }
        p {
            font-size: 20px;
            line-height: 1.75;
            text-align: center;
        }
    }
}

</style>

<template>
    <div class="my-toast">
        <div class="my-toast-box">
            <div class="close" @click="sendFunc">×</div>
            <div class="title">
                提示
            </div>
            <p>{{ msg }}</p>
        </div>
    </div>
</template>

<script lang="ts" setup>

// 自定义属性接收父组件的数据
defineProps({
    msg: {
        type:String,
        default: ''
    }
})

// 子组件传值给父组件 (vue3)
const emit = defineEmits(['my-send']);
const sendFunc = ()=> {
    // 发送数据
    emit('my-send', false)
}

</script>